#ifndef __HTML_H__
#define __HTML_H__
#include <ESPAsyncWebServer.h>

const char index_html[] PROGMEM = R"rawliteral(
    <!DOCTYPE html>
    <html>
    <head>
        <title>happy 6.1</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .control { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, auto); gap: 10px; max-width: 500px; margin: auto; padding: 15px; text-align: center; }
            .btn { padding: 20px; font-size: 24px; border: none; border-radius: 12px; background: #2196F3; color: white; touch-action: manipulation; min-width: 0; }
            .stop-btn { background: #ff4444; grid-column: 3; grid-row: 2; }
            .rotate-btn { background: #4CAF50; grid-row: 4; }
            .forward-left { grid-column: 2; grid-row: 1; }
            .forward { grid-column: 3; grid-row: 1; }
            .forward-right { grid-column: 4; grid-row: 1; }
            .left { grid-column: 2; grid-row: 2; }
            .right { grid-column: 4; grid-row: 2; }
            .backward-left { grid-column: 2; grid-row: 3; }
            .backward { grid-column: 3; grid-row: 3; }
            .backward-right { grid-column: 4; grid-row: 3; }
            .rotate-cw { grid-column: 1 / span 2; grid-row: 4; }
            .rotate-ccw { grid-column: 4 / span 2; grid-row: 4; }
            .speed-control { grid-column: 1 / span 5; grid-row: 5; }
            #speed {width: 80%; height: 15px; margin: 10px auto; }
        </style>
    </head>
    <body>
        <div class="control">
            <button class="btn forward-left" ontouchstart="sendCmd('forwardleft')" ontouchend="sendCmd('stop')">&#8598;</button>
            <button class="btn forward" ontouchstart="sendCmd('forward')" ontouchend="sendCmd('stop')">&#8593;</button>
            <button class="btn forward-right" ontouchstart="sendCmd('forwardright')" ontouchend="sendCmd('stop')">&#8599;</button>
            <button class="btn left" ontouchstart="sendCmd('left')" ontouchend="sendCmd('stop')">&#8592;</button>
            <button class="btn stop-btn" ontouchstart="sendCmd('stop')">&#9632;</button>
            <button class="btn right" ontouchstart="sendCmd('right')" ontouchend="sendCmd('stop')">&#8594;</button>
            <button class="btn backward-left" ontouchstart="sendCmd('backwardleft')" ontouchend="sendCmd('stop')">&#8601;</button>
            <button class="btn backward" ontouchstart="sendCmd('backward')" ontouchend="sendCmd('stop')">&#8595;</button>
            <button class="btn backward-right" ontouchstart="sendCmd('backwardright')" ontouchend="sendCmd('stop')">&#8600;</button>
            <button class="btn rotate-btn rotate-cw" ontouchstart="sendCmd('clockwise')" ontouchend="sendCmd('stop')">&#8635; CW</button>
            <button class="btn rotate-btn rotate-ccw" ontouchstart="sendCmd('anticlockwise')" ontouchend="sendCmd('stop')">&#8634; ACW</button>
            <div class="speed-control">
                <input type="range" id="speed" min="0" max="100" value="60" oninput="sendSpeed(this.value)">
                <p>Speed: <span id="speedVal">60</span>%</p>
            </div>
        </div>
        <script>
            function sendCmd(cmd) {
                fetch('/' + cmd)
                    .catch(error => console.error('Error:', error));
            }
            const speedSlider = document.getElementById('speed');
            const speedValue = document.getElementById('speedVal');
        
            // 实时发送速度值
            speedSlider.oninput = function() {
            speedValue.textContent = this.value;
            fetch(`/speed?value=${this.value}`);
            };
        </script>
    </body>
    </html>
    )rawliteral";

#endif